<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<!-- Always Include start -->
	<link type="text/css" href="css/reset.css" rel="stylesheet" />
	<link type="text/css" href="css/esCore.css" rel="stylesheet" />
	<link type="text/css" href="css/jq/es.jqui1.8.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jq/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jq/es.jqui1.8.min.js" ></script>
	<script type="text/javascript" src="js/jq/jquery.corner.js"></script>
	<script type="text/javascript" src="js/esCore.js"></script>
	<script type="text/javascript" src="js/jq/jquery.qtip-1.0.js"></script>
	<!-- Always Include ends -->
	
<style>
    #content {
      width: 600px ;
      margin-left: auto ;
      margin-right: auto ;
      margin-top: 40px;
      /*border: 1px solid #DDDDDD;*/
    }
    
    p{
        font-size: 12px;
    }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function createSems(count){

	var isCurrentSelected = "";
	if(count == 1){
		isCurrentSelected = "selected";
	}
	
    var seminput = '<table>';
    seminput = seminput +
                    '<tr>' +
                        '<td style="font-size:11px; font-family:\'lucida grande\',tahoma,verdana,arial,sans-serif;"></td><td style="font-size:11px; font-family:\'lucida grande\',tahoma,verdana,arial,sans-serif;">Semester Name</td><td style="font-size:11px; font-family:\'lucida grande\',tahoma,verdana,arial,sans-serif;">Running</td>' +
                    '</tr>';
                    
    for(var i=0; i<count; i++){
        seminput =  seminput + 
                    '<tr>' +
                        '<td style="font-size:11px; font-family:\'lucida grande\',tahoma,verdana,arial,sans-serif;text-align:center;padding-left:20px;">#' + (i+1) +'.</td>'+
                        '<td style="font-size:11px; font-family:\'lucida grande\',tahoma,verdana,arial,sans-serif;"><input class="semSeq" type="text" size="20"/></td>'+
                        '<td><input class="currsem" type="radio" id="curr_'+ i +'" name="isCurr"'+ isCurrentSelected +'/></td>' +
                    '</tr>';
    }
    
    seminput = seminput + 
                    '</table>';
    $('#semName').html(seminput);
}

$(document).ready(function(){
    $('.ucform').submit(function(){
        var str = "";
        var subFlag = true;
        if(!$('.urad').is(':checked')){
            alert("Please select a semester pattern.");
            subFlag = false;
        }
        if(!$('.currsem').is(':checked')){
            alert("Please select a current running semester.");
            subFlag = false;
        }
        $('.semSeq').each(function(index){
            if($(this).val()==""){
                alert("Please provide a value to semester name.");
                subFlag = false;
                return false;
            }
            var isRunning = $('#curr_'+index).is(':checked')?1:0;
            str = str+index+":"+$(this).val()+":"+isRunning+";";
        });
        $('.semList').val(str);
        //alert("form submit: " + str);
        return subFlag;
    });
});

</script>

</head>

<body>
<div id="content">
    <div style="margin:10px 0px 10px;">
        <h2 style="color:#0100FB; margin-bottom:0px;">University Registration</h2>
    </div>
    <div style="border: 1px solid #DDDDDD;">
        <div style="border-bottom:1px solid #DDDDDD;">
        <img src="images/icons/wlogo50.gif" style="float:left;margin: 2px 5px;"/>
        <p><span style="font-size:24;">W</span>elcome to EduCreek.<br/>Please select a <em>unique</em> short-name for the univesity to continue registration process.</p>
        </div>
        <div style="width: 300px; margin-left: 150px;">
            <form class="ucform" wicket:id="form">
                    <input type="hidden" class="semList" wicket:id="semList" id="semList" value=""/> 
                    <div wicket:id="feedback" style="color:red; margin-top:10px;">Feedback</div>
                    <p><label style="color:#999999;"><strong>University Full Name:</strong></label><br/>
                    <label wicket:id="univFullName">Indian Institute of Technology, Bombay</label>
                    </p>
                    <p><label style="color:#999999;"><strong>Unique Name:</strong></label><label  style="color:#999999;font-size:11px;">&nbsp;(Required)</label><br/>
                    <input wicket:id="uniqueName" type="text" size="25"/>&nbsp;<span wicket:id="availability"></span><br/>
                    <label style="font-size:11px; color:#666666;">Unique name should be an alphanumeric word and may contain hyphen, underscore and dot. E.g. for Indian Institute of Technology, Bombay, a suggested unique name would be <strong>iitb</strong></label>
                    </p>
                    <p><label style="color:#999999;"><strong>Academic Year:</strong></label><br/>
                    <select wicket:id="acadYr">
                    	<option value="2011">2011</option>
                    </select>
                    </p>
                    <p><label style="color:#999999"><strong>Semester Pattern:</strong></label><label style="font-size:11px;">&nbsp;(Required)</label><br/>
                        <input class="urad" type="radio" name="semCount" onClick="createSems(2)"/>&nbsp; 2 Semesters<br/>
                        <input class="urad" type="radio" name="semCount" onClick="createSems(3)"/>&nbsp; 3 Semesters<br/>
                        <input class="urad" type="radio" name="semCount" onClick="createSems(4)"/>&nbsp; 4 Semesters<br/>
                        <input class="urad" type="radio" name="semCount" onClick="createSems(1)"/>&nbsp; No Semesters<br/>
                    </p>
                    <div id="semName">
                    </div>
                    <p>
                    <input class="es-button ui-state-default ui-corner-all" type="submit" value="Continue"/>
                    </p>
                
            </form>
        </div>
    </div>
</div>
</body>
</html>